<script lang="ts" setup>
import {  ref, Ref, computed, watch } from "vue";
import User from '@/class/User';
import { useUserStoreHook } from "@/store/modules/user";
const dialogFormVisible = computed(() => props.isShow);
const formLabelWidth = '100px'

//事件
const emits =defineEmits(["closeEdit","success"])
//保存
const update =async () => {
    await useUserStoreHook().update(rowData.value)
    .then(rep => {
      if (rep.code == 200) {
        console.log(rep.msg)
      }
    })
    emits("success")
    
}
const close=()=>{
    emits("closeEdit")
}

//传参
const props = defineProps({
    isShow: Boolean,
    info: User
})

const rowData: Ref<User> = ref<User>({
    id: "",
    phone: "",
    account: "",
    email: "",
    type: 0,
    createTime: "",
    updateTime: "",
})

//监听
watch(() => props.info, (newInfo) => {
    if (newInfo) {
        rowData.value = {
            id: newInfo.id,
            phone: newInfo.phone,
            account: newInfo.account,
            email: newInfo.email,
            type: newInfo.type,
            createTime: newInfo.createTime,
            updateTime: newInfo.updateTime,
        }
    }
})
const computedSiteType=(e)=>{
    switch(e){
      case 0 :return "管理员";
      case 1 :return "招聘者";
      case 2 :return "求职者";
    }
}
</script>

<template>
    <el-dialog v-model="dialogFormVisible" title="新增" width="40%" @close="$emit('closeEdit')" draggable center>
        <el-form ref="formRef" :model="rowData" label-width="80px" :validate-on-rule-change="false" :inline="false" label-position="left" >
            <el-form-item label="用户id" prop="id" :label-width="formLabelWidth">
                <el-input v-model="rowData.id" disabled />
            </el-form-item><el-form-item label="账号" prop="account" :label-width="formLabelWidth">
                <el-input v-model="rowData.account" autocomplete="off" />
            </el-form-item>
            <el-form-item label="手机号" prop="phone" :label-width="formLabelWidth">
                <el-input v-model="rowData.phone" autocomplete="off" />
            </el-form-item>
            <el-form-item label="邮箱" prop="email" :label-width="formLabelWidth">
                <el-input v-model="rowData.email" type="email" autocomplete="off" />
            </el-form-item>
            <el-form-item label="类型" prop="email" :label-width="formLabelWidth">
                {{computedSiteType(rowData.type)}}
            </el-form-item>
            <el-form-item label="创建时间" prop="createTime" :label-width="formLabelWidth">
                <el-input v-model="rowData.createTime" type="text" disabled />
            </el-form-item>
            <el-form-item label="更新时间" prop="updateTime" :label-width="formLabelWidth">
                <el-input v-model="rowData.updateTime" type="text" disabled />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="close">关闭</el-button>
                <el-button type="primary" @click="update">
                    修改
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
